<!-- egcView.vue -->
<template>
    <div class="page-container">
        <div class="content">
            <CanvasWaveShowAll :data='waveData' class='wave-components' :waveNames='waveNames' :options='waveOpt'></CanvasWaveShowAll>
            <div class="info-show">
                <div class='info-item ecg'>
                    <label class='info-name'>ECG</label>
                    <span class='info-cont '>60</span>
                </div>
                <div class='info-item nibp'>
                    <label class='info-name'>
                        <span>NIBP</span>
                        <span>mmHg</span>
                        <span>16:00</span>
                        <span>PR</span>
                        <span class='nibp-pr'>60</span>
                    </label>
                    <span class='info-cont' title='120/80'>120/80</span>
                    <label class='info-name'>
                        <span>手动模式</span>
                    </label>
                </div>
                <div class='info-item sp02'>
                    <label class='info-name'>Sp02</label>
                    <span class='info-cont ecg-cont'>98</span>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    
    .page-container{
        background: #fff;
        padding: 20px;
    }
    .content{
        overflow: hidden;
    }
    .wave-components{
        float: left;
    }
    .waves-list{
        float: left;
    }
    .info-show{
        display: block;
        box-sizing: border-box;
        margin-left: 810px;
        padding: 0 20px;
    }
    .wave-item{
        /*overflow: hidden;*/
        line-height: 150px;
        margin-bottom: 3px;
    }
    .wave-name{
        display: block;
        width: 50px;
        text-align: right;
        margin-right: 10px;
        vertical-align: middle;
        float: left;
    }
    .wave-show{
        display: block;
        height: 150px;
        float: left;
        width: 100%;
    }
    .info-item{
        /*border:1px solid #333;*/
        margin-bottom: 20px;
        border-radius: 5px;
        padding: 20px;
        background: #f0f0f0;
    }
    .info-item.ecg{
        color: #67C23A ;
    }
    .info-item.nibp{
        color: #F56C6C ;
    }
    .info-item.sp02{
        color: #409EFF;
    }
    .info-name{
        display:block;
        font-weight: bold;
    }
    .info-name span{
        margin-right: 20px;
    }
    .nibp-pr{
        font-size: 20px;
    }
    .info-cont{
        display:block;
        text-align: center;
        font-size: 120px;
        font-weight: bold;
        padding: 20px 0;
        overflow:hidden;
    }
    .info-item.nibp .info-cont{
        font-size: 100px;
    }
    /*<div class='info-item'>
                    <label class='info-name'>ECG</label>
                    <span class='info-cont ecg-cont'>60</span>
                </div>*/
</style>
<script>
    import CanvasWaveShowAll from '@/components/CanvasWaveShowAll.vue';
    export default {
        components:{
            CanvasWaveShowAll,
        },
        data(){
            return {
                waveData:null , // 示波数据
                waveNames:['I','II','III','aVR','aVL','aVF','V1','V2','V3','V4','V5','V6'], // 需显示的波形名称，和数据的key对应。数据形式可见init方法中的注释行 ,该选项必须传，以此控制显示哪些波形
                waveOpt:{
                    backgroundColor:'#f0f0f0', // 背景颜色
                    gridColor:'#ff0000' , // 栅格颜色和波形名称的颜色
                    waveColor:'#67C23A', // 波形的颜色
                },
                datas:[] , // 数据池，每秒去拿一组数据，push到这里
                getDataTimer:null, // 获取数据的timer,每秒去获取一次数据
                changeDataTimer:null , // 改变显示数据的timer，每秒从数据池shift数据拿来显示
            }
        },
        methods:{
            init(){
                clearInterval(this.getDataTimer) ;
                /*waveData = { // 多个波的数据，波的名字和波值数组对应。
                    "I":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,129,131,131,132,133,134,135,135,135,135,134,133,132,131,130,128,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,120,118,121,133,144,155,165,176,180,170,159,148,137,126,118,119,121,122,124,124,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,128,128,130,131,132,134,135,136,137,138,139,139,140,141,142,143,143,143,144,144,144,144,144,143,142,141,140,139,137,137,136,134,133,131,130,128,127,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                    "II":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,126,127,129,129,130,130,131,132,132,132,132,131,130,130,129,129,127,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,121,122,130,137,145,152,159,162,155,148,140,133,126,120,121,122,123,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,127,129,129,130,131,132,132,133,134,135,135,135,136,136,137,137,137,138,138,138,138,137,137,136,136,135,135,133,133,133,131,130,129,129,127,126,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                    "III":[128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,129,130,130,130,130,131,131,131,131,131,131,131,131,130,130,129,129,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,127,127,127,126,125,127,131,135,138,141,145,146,143,139,136,132,128,126,126,127,127,127,127,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,129,129,129,130,130,131,131,132,132,132,132,132,133,133,134,134,134,134,134,134,134,134,135,134,134,133,133,132,132,132,131,131,131,130,129,129,129,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128,128],
                    "aVR":[131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,130,129,128,126,126,125,125,124,123,123,123,123,124,125,125,126,127,128,129,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,132,133,135,136,134,125,116,106,98,89,85,94,103,112,121,130,137,136,134,133,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,130,128,128,127,126,125,124,123,122,121,120,119,119,119,118,117,116,116,116,115,115,115,115,116,116,117,118,119,119,121,121,122,124,125,126,127,128,129,130,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131],
                    "aVL":[131,131,131,131,131,131,131,131,131,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,127,126,127,128,128,128,128,128,129,129,129,129,128,128,128,128,128,127,127,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,127,126,126,126,126,125,128,129,132,134,135,136,134,133,130,129,127,125,125,125,126,127,127,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,127,127,127,128,128,128,128,129,128,129,129,130,130,129,130,129,130,130,130,130,130,130,130,129,130,129,130,129,130,129,129,129,128,128,128,128,127,126,127,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126],
                    "aVF":[126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,127,128,129,131,131,131,132,133,133,133,133,133,133,132,131,131,130,128,127,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,125,125,124,123,121,124,132,140,147,153,161,163,157,149,142,135,127,122,122,124,124,125,125,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,127,128,128,130,131,131,133,133,134,135,135,136,136,137,137,138,139,139,139,139,139,139,139,140,139,138,137,137,136,135,135,134,133,132,131,130,128,128,127,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126],
                    "V1":[126,126,126,126,126,126,126,126,126,127,127,127,127,127,127,127,127,127,127,127,127,127,127,127,127,127,126,126,126,126,126,126,126,126,126,126,125,125,125,125,125,125,126,126,126,125,125,125,124,124,124,124,125,125,125,125,125,125,125,125,125,125,126,126,126,126,126,126,125,125,125,125,126,126,126,127,127,127,127,127,127,127,127,127,126,126,126,126,127,127,128,128,129,129,130,129,128,127,125,124,124,124,124,124,126,126,126,126,126,126,126,126,126,126,126,126,126,126,126,127,128,129,133,126,127,126,126,127,128,129,133,135,135,135,127,123,107,101,84,80,71,70,74,78,95,102,124,131,144,146,149,148,145,143,140,140,140,140,142,142,142,141,140,139,139,139,138,138,138,138,138,138,137,137,136,135,135,135,135,135,135,134,133,132,131,131,130,129,129,129,129,130,130,129,128,128,125,124,122,122,121,120,121,121,122,122,122,121,121,121,121,121,123,123,124,125,126,127,127,128,128,128,129,129,130,130,131,131,131,131,131,131,131,131,131,131,131,131,131,131,131,130,131,131,131,131,130,130,129,129],
                    "V2":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,129,131,131,132,133,134,135,135,135,135,134,133,132,131,130,128,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,120,118,121,133,144,155,165,176,180,170,159,148,137,126,118,119,121,122,124,124,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,128,128,130,131,132,134,135,136,137,138,139,139,140,141,142,143,143,143,144,144,144,144,144,143,142,141,140,139,137,137,136,134,133,131,130,128,127,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                    "V3":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,129,131,131,132,133,134,135,135,135,135,134,133,132,131,130,128,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,120,118,121,133,144,155,165,176,180,170,159,148,137,126,118,119,121,122,124,124,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,128,128,130,131,132,134,135,136,137,138,139,139,140,141,142,143,143,143,144,144,144,144,144,143,142,141,140,139,137,137,136,134,133,131,130,128,127,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                    "V4":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,129,131,131,132,133,134,135,135,135,135,134,133,132,131,130,128,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,120,118,121,133,144,155,165,176,180,170,159,148,137,126,118,119,121,122,124,124,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,128,128,130,131,132,134,135,136,137,138,139,139,140,141,142,143,143,143,144,144,144,144,144,143,142,141,140,139,137,137,136,134,133,131,130,128,127,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                    "V5":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,129,131,131,132,133,134,135,135,135,135,134,133,132,131,130,128,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,120,118,121,133,144,155,165,176,180,170,159,148,137,126,118,119,121,122,124,124,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,128,128,130,131,132,134,135,136,137,138,139,139,140,141,142,143,143,143,144,144,144,144,144,143,142,141,140,139,137,137,136,134,133,131,130,128,127,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                    "V6":[125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,127,129,131,131,132,133,134,135,135,135,135,134,133,132,131,130,128,127,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,124,123,122,120,118,121,133,144,155,165,176,180,170,159,148,137,126,118,119,121,122,124,124,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,126,128,128,130,131,132,134,135,136,137,138,139,139,140,141,142,143,143,143,144,144,144,144,144,143,142,141,140,139,137,137,136,134,133,131,130,128,127,126,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125,125],
                }*/
                console.log('实际项目这里替换查询数据的接口，以及修改数据格式成上面的样子')
                this.getDataTimer = setInterval(()=>{
                    this.axios.get('./static/waveData.json').then(res=>{
                        this.datas.push(res.data.waves)
                    }).catch(err=>{
                        console.error('err:',err)
                    })
                    let empWave = new Array(250).fill(125) ; // 空波形，全部值125的直线
                    // console.log(this.datas)
                    if(this.datas.length>=4&&!this.changeDataTimer){
                        this.waveData = this.datas.shift() ;
                        // 首次达到4组数据以上，开始显示波形
                        this.changeDataTimer = setInterval(()=>{
                            if(this.datas.length){
                                this.waveData = this.datas.shift() ;
                            }else{
                                this.$message({
                                    message:'网络延迟，数据丢失',
                                    type:'errro'
                                })
                                // 传空：
                                this.waveData = {
                                    "I":empWave,
                                    "II":empWave,
                                    "III":empWave,
                                    "aVR":empWave,
                                    "aVL":empWave,
                                    "aVF":empWave,
                                    "V1":empWave,
                                    "V2":empWave,
                                    "V3":empWave,
                                    "V4":empWave,
                                    "V5":empWave,
                                    "V6":empWave,
                                } ;
                            }
                        },1000)
                    }else if(!this.changeDataTimer){
                        // 传空：
                        this.waveData = {
                            "I":empWave,
                            "II":empWave,
                            "III":empWave,
                            "aVR":empWave,
                            "aVL":empWave,
                            "aVF":empWave,
                            "V1":empWave,
                            "V2":empWave,
                            "V3":empWave,
                            "V4":empWave,
                            "V5":empWave,
                            "V6":empWave,
                        } ;
                    }
                },1000)
            },
            clearTimer(){
                clearInterval(this.getDataTimer) ;
                this.getDataTimer = null;
                clearInterval(this.changeDataTimer) ;
                this.changeDataTimer = null;
            }
        },
        created(){
            // window.addEventListener('focus',this.init,false) ;
            // window.addEventListener('blur',this.clearTimer) ;
        },
        mounted(){
            // 假设每秒查一次数据，放到队列中，每次从只显示第一组数据
            this.init();
        },
        beforeDestroy(){
            this.clearTimer() ;
            // window.removeEventListener('focus',this.init,false) ;
            // window.removeEventListener('blur',this.clearTimer) ;
        }
    }
</script>